<template>
  <el-form

    ref="refForm"
    :rules="refRule"
    :disabled="loading"
    :model="form" class="demo-form-inline">
    <el-form-item prop="users">
      <slot name="label">
        <div class="label">用户名</div>
      </slot>
      <el-tip>请输入会员或代理账户名(多个用户名请用逗号隔开,若有重复用户将自动去除)</el-tip>
      <el-col :span="10">
        <el-input type="textarea" spellcheck="false" rows="6" v-model="form.users" @change="usersChange" @keyup.enter.native="toSave"></el-input>
      </el-col>
      <el-col :span="10">
        <div style="padding: 0px 10px 10px 20px;">
          <!--<el-upload-txt @success='usersChange'></el-upload-txt>-->
          <!--<el-tip style="padding-top: 10px;">支持txt，单次最多可导入200个用逗号分隔的用户名</el-tip>-->
        </div>
      </el-col>
      <el-col :span="24" v-if="inValidateUsers.length>0">
        以下账号不存在：
        <span style="color: red;text-decoration: underline;padding: 5px;"
              v-for="user in inValidateUsers">{{user}}</span>
      </el-col>
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item  width="300px" prop="subType">
            <slot name="label">
              <div class="label">操作类型</div>
            </slot>
            <el-cascader
              width="300px"
              :options="consts.ADJUSTMENT_TYPES_DETAIL"
              :value="value"
              @change="handleChange">
            </el-cascader>
        </el-form-item>
      </el-col>
<!--      <el-col :span="5">-->
<!--        <el-form-item width="300px" prop="orderNumber">-->
<!--          <slot name="label">-->
<!--            <div class="label">订单号</div>-->
<!--          </slot>-->
<!--          <el-input type="text" ></el-input>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item prop="amount">
          <slot name="label">
            <div class="label">调整金额</div>
          </slot>
          <el-input-number
            :controls="false"
            :min="0.01" :max="1000000" @keydown.native="handleInput" v-model.number="form.amount" @keyup.enter.native="toSave">
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="5" v-if="form.changeType!=-2&&form.changeType!=1011&&form.subType!=25">
        <el-form-item prop="freezeAmount" >
          <slot name="label">
            <div class="label">需求流水金额</div>
          </slot>
          <el-input-number
            :controls="false"
            :min="0" :max="5000000" @keydown.native="handleInput" v-model.number="form.freezeAmount" @keyup.enter.native="toSave">
          </el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item prop="remark">
      <el-col :span="10">
        <slot name="label">
          <div class="label">调整原由</div>
        </slot>
        <el-input type="textarea" placeholder="请说明调整原因" rows="3" v-model="form.remark">
        </el-input>
      </el-col>
    </el-form-item>
    <!--<el-form-item prop="imgs">-->
    <!--<el-col :span="10">-->
    <!--<slot name="label">-->
    <!--<div class="label">附件</div>-->
    <!--</slot>-->
    <!--<el-upload-->
    <!--class="upload-demo"-->
    <!--:action="uploadApi"-->
    <!--:on-preview="handlePreview"-->
    <!--:on-remove="handleRemove"-->
    <!--:before-upload="beforeUpload"-->
    <!--multiple-->
    <!--:limit="3"-->
    <!--:on-exceed="handleExceed"-->
    <!--:on-success="handleSuccess"-->
    <!--list-type="picture"-->
    <!--:file-list="fileList">-->
    <!--<el-button size="small" type="primary">点击上传</el-button>-->
    <!--<el-tip>*支持gif、jpg、png格式，大小不超过2M，最多可添加三条。</el-tip>-->
    <!--</el-upload>-->
    <!--<el-input v-model="form.imgs" type="hidden"></el-input>-->
    <!--</el-col>-->
    <!--</el-form-item>-->
    <div style="padding: 20px 0 20px 150px">
      <el-button class="filter-item" type="primary" icon="el-icon-printer"
                 @click="toSave">确认
      </el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <p  class="name-list"  v-if="this.result.failList.length>0"><span>账号{{this.result.failList.join(',')}}为{{this.result.userType==0?'会员':'代理'}}账号，无法进行<b>{{this.result.applyType}}</b>类型的资金调整;</span></p>
      <p class="name-list"  v-if="this.result.successList.length>0"><span>账号{{this.result.successList.join(',')}}已成功提交调整申请。</span></p>
      <p class="name-list" v-if="this.result.invalid.length>0"><span>账号{{this.result.invalid.join(',')}}不存在</span></p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>

    </el-dialog>
  </el-form>


</template>

<script>
import Cookies from 'js-cookie';
import { form, factory } from '@/build';
import { updateAdjustmentConfigs, validateAdjustmentUsers } from '@/services/api/adjustment';
import ElTip from '@/components/Tip/index';
import ElUploadTxt from '@/components/ElUploadTxt/index.vue';

export default {
  name: 'adjustment-apply',
  components: { ElTip, ElUploadTxt },
  mixins: [form, factory],
  data() {
    return {
      dialogVisible: false,
      result: {
        successList: [],
        failList: [],
        invalid: [],
        applyType: '',
      },
      value: [],
      uploadApi: `${api.UPLOAD_PIC}?token=${Cookies.get(consts.CACHE_TOKEN)}&uid=${Cookies.get(consts.CACHE_UID)}`,
      fileList: [],
      inValidateUsers: [],
      form: {
        users: undefined,
        changeType: undefined, // 大类
        subType: undefined, // 明细类
        remark: undefined,
        amount: undefined,
        freezeAmount: undefined,
        orderNumber: undefined,
      },
      refRule: {
        users: [
          { required: true, message: '用户名不能为空' },
        ],
        subType: [
          { required: true, message: '操作类型为必选项' },
        ],
        remark: [
          { required: true, message: '调整理由不能为空' },
        ],
        orderNumber: [
          {required: true, message: '订单号不能为空', trigger: 'blur' },
        ],
        amount: factory.getRule('floatMoney'),
        freezeAmount: factory.getRule('floatMoney'),
      },
      amountError: '',
    };
  },
  mounted() {
    this.bindSave(updateAdjustmentConfigs, 'saveForm', 'form', {
      beforeSend: (data) => {
        if (data && data.changeType == -2) {
          data.freezeAmount = 0;
        }
        return data;
      },
      afterSuccess: ([result, data]) => {
        this.value = [];
        this.form.changeType = undefined;
        this.form.subType = undefined;
        this.dialogVisible = true;
        this.result = data;
        // console.log(JSON.stringify(this.result));
        this.resetForm('refForm');
      },
    });
  },
  methods: {
    toSave() {
      this.doSave({
        action: 'saveForm',
        form: 'refForm',

      });
    },
    handleChange(value) {
      this.form.changeType = value[0],
      this.form.subType = value[1];
    },
    handleInput(e) {
      // 通过正则过滤小数点后两位
      e.target.value = (e.target.value.match(/^-?\d*(\.?\d{0,1})/g)[0]) || e.target.value;
    },
    usersChange(val) {
      val = val.replace(/，/g, ',');
      const users = _.uniq(val.split(',')).filter(d => d).join(',');
      this.$_validateUsers(users);
      this.form.users = users;
    },

    $_validateUsers(users) {
      validateAdjustmentUsers({ users }).then(([result, data]) => {
        if (result) {
          this.inValidateUsers = data;
        }
      });
    },
    minAmountChange() {
      this.amountError = '';
      if (this.form.amount > 50000) {
        this.amountError = '最大金额为50000';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body{padding:10px 20px}
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

 .money-range {
    .el-input {
      width: 100px;
    }
  }

  .el-upload {
    text-align: left;
  }
.el-cascader{width:300px}
.name-list{white-space: pre-wrap;line-height: 25px;word-break: break-all}
</style>
